<template>
    <div class="myChart chart-top">
        <span
            style="color:white;font-size: 14px;font-weight: bold;font-style: italic;letter-spacing: 2px;margin-left: 10%;">工厂TOP5</span>
        <img src="../../assets/images/divide.png" alt="" style="width: 100%;">
        <dv-scroll-board :config="alarmDataConfig" style="width:100%;height:90%" />
        <img src="../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
    </div>
</template>

<script>
import { deptDevice } from '../../api/oil/statistic';
export default {
    name: 'DeptDeviceTop',
    data() {
        return {
            alarmDataConfig: {},
            config:{ header: ['排名','用户名称', '设备数量','地区'],columnWidth:[80,200,130,180],align:['center','left','center','left'],headerBGC:'transparent',headerColor: '#fff', oddRowBGC: 'transparent', evenRowBGC: 'transparent', oddRowColor: '#fff', evenRowColor: '#fff', scrollSpeed: 1000 },
            alarmData: [],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            deptDevice().then(res => {
                var alarmData = res.data;
                var index=1;
                this.alarmData = alarmData.map(obj=>[index++,obj.dept_name,obj.device_count,obj.address]);
                this.config.data = this.alarmData;
                this.alarmDataConfig = this.config;
            });
        }
    },
    mounted() {
        // Add your mounted logic here
    }
};
</script>

<style>
.chart-top .dv-scroll-board .header {
  background: transparent;
}
</style>